<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function() {
				
				var btn = document.getElementById("btn");

				/*
				 * addEventListener()
				 * 	- 为指定元素绑定事件响应函数
				 *  - 可以同时为一个元素的相同事件绑定多个响应函数， 事件触发时，会按照函数的绑定顺序执行
				 *  - 参数：
				 * 		1.事件的字符串，不要on前缀，例如click代替onclick
				 * 		2.回调函数，当事件触发时该函数会被调用
				 * 		3.是否在捕获阶段触发事件，默认为false: 冒泡阶段
				 * 
				 * 这个方法不支持IE8及以下的浏览器
				 */
				// btn.addEventListener("click",function() {
				// 	alert(1);
				// }, false);
				
				// btn.addEventListener("click",function() {
				// 	alert(2);
				// }, false);
				
				/*
				 * attachEvent()
				 * 	- 在IE8中可以使用attachEvent()来绑定事件
				 *  - 该方法也可以为个元素的相同事件绑定多个响应函数， 不过执行顺序与绑定的顺序相反
				 *  - 参数：
				 * 		1.事件的字符串，要on前缀
				 * 		2.回调函数
				 *
				 */
				// btn.attachEvent("onclick",function() {
				// 	alert(3);
				// });
				
				// btn.attachEvent("onclick",function() {
				// 	alert(4);
				// });
				
				bind(btn, "click", function() {
					alert(5);
				})

				bind(btn, "click", function() {
					alert(6);
				})

				bind(btn, "click", function() {
					alert(this);
				})
				
			};
	

			/*
			 * addEventListener()中的this，是绑定事件的对象
			 * attachEvent()中的this，是window
			 * 所以需要统一this
			 */
			function bind(obj, eventName, callback) {
				if (obj.addEventListener) {
					obj.addEventListener(eventName, callback, false);
				} else {
					
					// 兼容IE8及以下
					obj.attachEvent("on" + eventName, function() {
						callback.call(obj); // 统一this
					});
				}
			}
			
		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
	</body>
</html>
